<!DOCTYPE html>
<html lang="en">
<head>
  <title>地图导航</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style rel="stylesheet" type="text/css">
    /*去除正文区域的间距*/
    body{margin:0 auto; padding:0}

    /*地图加载区域样式*/
    #container{
        width:100%;
        height:100vh;
    }

  </style>
</head>
<body>
<!--地图容器-->
<div id="container"></div>

<!--设置全局脚本变量：地图使用的密钥-->
<script type="text/javascript">
  //原型链：在当前web打开网页的窗口对象window中，添加变量
  window._AMapSecurityConfig = {
      //【安全密钥】
      securityJsCode = "f3ae76ab518db13e08a1623c6ac9fb36"
  }
</script>

<!--获取整个地图的脚本:
    直接访问官网下载到本地的，下载时，提供key
-->
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=c10811713fd5092fca9fa6c3a91454b8"
></script>

<!--初始化地图-->
<script type="text/javascript">
  //初始化地图，遇到new就会创建实例，页面中就会按照上面下载的脚本
  //进行处理，绘制地图
  //这里采用的都是var：因为后续还有方法需要使用到这些对象
  //因此，用var，进行变量提升，默认通过原型链，挂载到当前位置的最顶层
  //按照现在的情况，最顶层对象就是：window

  //地图初始化后，缩放比例
  var zoom = 18

  //创建地图对象，设置默认的定位经纬度
  var map = new AMap.Map(
    "container",               //显示容器的id值：上面的那个div
    {
       zoom: zoom,                     //默认的初始化显示比例
       //center: [121.47592, 31.237687]  //中心点-上海学校总部
       center: [116.397658, 39.908028] //中心点-北京天安门
    }
  );



  //当页面加载完毕时
  window.onload = function(){
      //调用鸿蒙端Proxy代理过来的指定方法
      window.swift.setCurrentLocation()
  };


  //【定位方法】：
  // 方法负责进行具体内容的设置与操作，由-鸿蒙应用负责调用
  function setLocation(lng, lat) {
      //第一步：设置地图的中心点
      map.setZoomAndCenter(zoom, [lng, lat]);

      //第二步：设置中心点的Marker标记
      var marker = new AMap.Marker({
          map: map,                               //基于那个地图对象
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: [lng, lat]                    //经纬度
      });
      //添加到地图中
      map.add(marker);

      //第三步：为地图添加插件功能
      //自动搜索且标记出周围的核心地标
      map.plugin(['AMap.PlaceSearch'], function(){
              //搜索参数配置对象
              var PlaceSearchOptions = {
                  map: map,            //地图位置
                  pageSize: 4,         //搜索出的结果，默认10个
                  pageIndex: 1,        //显示第几页
                  extensions: 'base'   //返回的详情-只要基本信息
              };

              //创建插件-搜索功能类-功能实例
              var MSearch = new AMap.PlaceSearch(PlaceSearchOptions);

              //设置监听：(具体对象操作，'完成状态'，回调)-没有执行
              AMap.Event.AddListener( MSearch, 'complete', (res)=>{
                  //将搜索到的结果，通过事件调用
                  //作为参数，传递到鸿蒙应用中
                  window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
              });

              //正式执行搜索，在指定的坐标周围
              MSearch.searchNearBy('停车场', [lng,lat]);
          }
      );
  }

</script>
</body>
</html>